<template>
    <div class="ph-color-input-zone">
        <div class="ph-color-ip-left">
            <template v-if="mode==modes.hex">
                <div class="ph-c-wrap" style="flex:1">
                    <ph-base-input :value="value" name="hex" @change="change" data-validator="hex"/>
                    <div class="ph-text">HEX</div>
                </div>
            </template>
            <template v-if="mode==modes.rgba">
                <div class="ph-c-wrap" v-for="(item,idx) in ['R','G','B','A']" :key="idx">
                    <ph-base-input :value="value[idx]" :name="item" @change="change" data-validator="number"/>
                    <div class="ph-text">{{item}}</div>
                </div>
            </template>
            <template v-if="mode==modes.hsla">
                <div class="ph-c-wrap">
                    <ph-base-input :value="value[0]" name="H" @change="change" data-validator="number"/>
                    <div class="ph-text">H</div>
                </div>
                <div class="ph-c-wrap">
                    <ph-base-input :value="Math.round(value[1]*100)+'%'" name="S" @change="change" data-validator="percent"/>
                    <div class="ph-text">S</div>
                </div>
                <div class="ph-c-wrap">
                    <ph-base-input :value="Math.round(value[2]*100)+'%'" name="L" @change="change" data-validator="percent"/>
                    <div class="ph-text">L</div>
                </div>
                <div class="ph-c-wrap">
                    <ph-base-input :value="value[3]" name="A" @change="change" data-validator="number"/>
                    <div class="ph-text">A</div>
                </div>
            </template>
        </div>
        <div class="ph-color-mode">
            <ph-icon icon="caret-up" @click="modeShift(-1)"/>
            <ph-icon icon="caret-down" @click="modeShift(1)"/>
        </div>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import { PhIcon , PhBaseInput } from '../base'
import { ColorMode , ColorReg } from 'ph-color-util'
export default defineComponent({
    props:{
        mode:{
            type:Number
        },
        value:{
            type:[String,Array]
        }
    },
    setup(props,{emit}) {
        const list:number[] = [ColorMode.hex,ColorMode.rgba,ColorMode.hsla]
        
        const modes = {
            hex:ColorMode.hex,
            rgba:ColorMode.rgba,
            hsla:ColorMode.hsla
        }
        const cmodeIndex = computed(()=>{
            return list.findIndex(n=>n===props.mode)
        })
        const modeShift = (dir:number)=>{
            let idx = (cmodeIndex.value+dir)%list.length
            idx = idx<0?list.length+idx:idx
            emit("mode-shift",list[idx])
        }
        const change = (e:Event)=>{
            const t = e.target as HTMLInputElement
            const 
                value = t.value.replace(/\s+/,''),
                name = t.name,
                validator = t.dataset.validator;
            if(validator&&ColorReg[validator]&&ColorReg[validator].test(value)){
                emit("color-change",{
                    name,
                    value
                })
            }
        }
        return {modes,modeShift,change}
    },
    components:{
        PhIcon,
        PhBaseInput
    }
})
</script>
<style lang="scss" scoped>
    .ph-color-input-zone{
        display: flex;
        height: 0.7514rem;
        justify-content: space-evenly;
        align-items: center;
        padding: 0 var(--ph-15);
        .ph-color-ip-left{
            display: flex;
            flex: 1;
            flex-direction: row;
            justify-content: space-evenly;
            text-align: center;
            .ph-simple-input{
                text-align: center;
                height: 0.3510rem;
                line-height: 0.3510rem;
                text-indent: 0;
            }
            .ph-text{
                line-height: 0.3510rem;
                font-size: .1406rem;
            }
            .ph-c-wrap{
                flex: 0 0 0.5627rem;
                .ph-simple-input{
                    width: 100%;
                }
            }
        }
        .ph-color-mode{
            flex: 0 0 var(--ph-15);
            line-height: .1171rem;
            .ph-icon{
                text-align: right;
                &:first-child{
                    padding-top: .1171rem;
                }
                &:last-child{
                    padding-bottom: .1171rem;
                }
                &:hover{
                    color:var(--ph-theme);
                    cursor:pointer;
                }
            }
        }
    }
</style>
